<template>
  <!-- 选择转授员工 -->
  <uni-popup ref="selectStaffAddress">
    <view class="content_list">
      <!-- 标题 -->
      <view class="uni-share-title">选择转授员工</view>
      <!-- 搜索框 -->
      <view class="slot-box">
        <view style="width: 100%;">
          <uni-search-bar
              v-model="queryParams.params.findApi"
              type="text"
              @confirm="handleQuery"
              @input="handleQuery"
              placeholder="请输入转授员工名称/手机号"
          />
        </view>
      </view>
      <!-- 数据列表 -->
      <scroll-view scroll-y="true" class="scroll_view_style" @scrolltolower="toScrolltolower">
        <uni-card :is-shadow="false" v-for="(item,index) in dataList" :key="index" :title="item.name">
          <template v-slot:title>
            <view class="card-header flex_between">
              <p class="content_p">{{ item.name }}</p>
              <uni-icons
                  v-if="!!selectData && selectData.id == item.id"
                  type="checkmarkempty"
                  size="18"
                  color="#00a660"
              ></uni-icons>
            </view>
          </template>
          <p class="content_p">手机号码：{{ item.mobile }}</p>
          <p class="content_p">所属部门：{{ item.deptName }}</p>
          <p class="content_p">
            拥有角色：
            <span v-if="companyInfo.adminId == item.id && companyInfo.legalPersonId == item.id">
              法定代表人,企业管理员,{{ item.roleName.replace("普通员工", "") }}
            </span>
            <span v-else-if="companyInfo.legalPersonId == item.id">法定代表人,{{ item.roleName.replace("普通员工", "") }}</span>
            <span v-else-if="companyInfo.adminId == item.id">企业管理员,{{ item.roleName.replace("普通员工", "") }}</span>
            <span v-else>{{ item.roleName }}</span>
          </p>
          <!-- 管理员转授，禁止选择自己 -->
          <template v-if="type == 0 && companyInfo.adminId != item.id">
            <view slot="actions" class="card-actions">
              <view class="actions" @click="handleSave(item)">
                <view class="card-actions-item">
                  <text class="card-actions-item-text themeColor">选择</text>
                </view>
              </view>
            </view>
          </template>
          <!-- 法人转授，禁止选择自己 -->
          <template v-if="type == 1 && companyInfo.legalPersonId != item.id">
            <view slot="actions" class="card-actions">
              <view class="actions" @click="handleSave(item)">
                <view class="card-actions-item">
                  <text class="card-actions-item-text themeColor">选择</text>
                </view>
              </view>
            </view>
          </template>
        </uni-card>
        <!-- 加载更多 -->
        <uni-load-more color="#00a660" :status="loadStatus"/>
      </scroll-view>
    </view>
  </uni-popup>
</template>

<script>

import {listStaffPager} from "@/api/ec/console/org/staff";

export default {
  props: {},
  data() {
    return {
      // 企业信息
      companyInfo: this.$store.getters.companyInfo,
      // 0 管理员 ，1法人
      type: 0,
      // 已选中
      selectData: null,
      // 加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
      loadStatus: 'loading',
      // 数据列表
      dataList: [],
      //总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        isCertify: 1,
        status: 1,
        mobile: null,
        params: {
          findApi: undefined
        }
      },
    };
  },
  created() {
  },
  methods: {
    /** 打开弹出框 */
    toOpenDialog(type, selectData) {
      this.type = type;
      this.selectData = selectData;
      this.$refs.selectStaffAddress.open('bottom')
      this.handleQuery();
    },
    /** 取消按钮 */
    cancel() {
      this.$refs.selectStaffAddress.close();
    },
    /** 搜索 */
    handleQuery() {
      this.getList(true);
    },
    /**
     * 查询数据列表
     * @param reload true 重新加载数据； false 加载更多
     */
    getList(reload) {
      if (reload) {
        this.queryParams.pageNum = 1;
        this.loadStatus = 'more'
        uni.showLoading({title: '加载中...', mask: true});
      }
      this.queryParams.mobile = this.queryParams.params.findApi;
      listStaffPager(this.queryParams).then(response => {
        if (reload) {
          uni.hideLoading();
        }
        this.total = response.total;
        if (response.total > 0) {
          const dataRows = response.rows;
          this.dataList = reload ? dataRows : this.dataList.concat(dataRows);
        } else {
          this.dataList = [];
        }
        // 判断数据是否加载完全
        if (response.total <= this.dataList.length) {
          this.loadStatus = 'noMore'
        }
        // 页数+1
        this.queryParams.pageNum++
      }).catch(() => {
        if (reload) {
          uni.hideLoading();
        }
      });
    },
    /** 滑到底部监听 */
    toScrolltolower() {
      if (this.loadStatus != 'noMore' && this.total > this.dataList.length) {
        this.loadStatus = 'loading';
        // 延迟500毫秒显示loading效果
        setTimeout(() => {
          // 执行查询的方法
          this.getList(false);
        }, 500)
      } else {
        // 停止加载
        this.loadStatus = 'noMore'
      }
    },
    /** 确定按钮操作 */
    handleSave(item) {
      this.cancel();
      this.$emit("success", item);
    },
  }
};
</script>
<style scoped lang="scss">
.content_list {
  height: 880rpx;
  overflow-x: hidden;
  background: #FFFFFF;
  padding: 10rpx 0;

  .scroll_view_style {
    height: 100%;
  }
}

.card-actions {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 45px;
  border-top: 1px #eee solid;
}

.card-actions-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.uni-share-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 60rpx;
  font-size: 26rpx;
  color: #666;
}

.card-header {
  display: flex;
  border-bottom: 1px #EBEEF5 solid;
  flex-direction: row;
  align-items: center;
  padding: 10px;
  overflow: hidden;
}

</style>
